export const dimensionalBar = () => {
    return `
    <template>
    <div
      class="content"
      :style="{
        height: height,
        width: width,
      }"
    >
        <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import  "echarts";
  const offsetX = 20;
  const offsetY = 10;
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
     shape: {
        x: 0,
        y: 0,
     },
     buildPath: function (ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint;
        // console.log(shape);
        const c0 = [shape.x, shape.y-5];
        const c1 = [shape.x - offsetX, shape.y - offsetY];
        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
        const c3 = [xAxisPoint[0], xAxisPoint[1]-5];
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
     },
  });
  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
     shape: {
        x: 0,
        y: 0,
     },
     buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x, shape.y-5];
        const c2 = [xAxisPoint[0], xAxisPoint[1]-5];
        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
        const c4 = [shape.x + offsetX, shape.y - offsetY];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
     },
  });
  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
     shape: {
        x: 0,
        y: 0,
     },
     buildPath: function (ctx, shape) {
          const y = -1
        const c1 = [shape.x, shape.y+y-5];
        const c2 = [shape.x + offsetX, shape.y - offsetY+y] ; //右点
        const c3 = [shape.x, shape.y - offsetX+y+5];
        const c4 = [shape.x - offsetX, shape.y - offsetY+y];
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
     },
  });
  // 注册三个面图形
  echarts.graphic.registerShape('CubeLeft', CubeLeft);
  echarts.graphic.registerShape('CubeRight', CubeRight);
  echarts.graphic.registerShape('CubeTop', CubeTop);
  
  const data  =[1000, 2348, 2904, 1049, 1744, 6230]
  /*
  基本数据类型
  引用数据类型（复杂类型） 个人建议 ref初始化变量 
  ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
  ref定义的数据访问的时候要多一个.value
  */
  const color = ["rgba(63,117,255,0)", "#0063FA"];
  const state = reactive({
    option:  {
    
      
  
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
  
      xAxis: {
        type: 'category',
        axisTick: { show: false },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        axisLabel: {
          color: "#97B2E0",
        },
      },
      yAxis: [
          {
        type: 'value',
        name:"(万元)", 
              axisLine: {
              show: true,
              lineStyle: {
                 color: '#00A8FF'
              }
           },
        nameTextStyle: {
            color:"#97B2E0",
            padding:[0,0,-550,-50]
        },
        axisLabel: {
          color: "#97B2E0",
        },
        splitLine: {
          show: false,
         
          },
          axisTick:{
              show:false
          }
      }
      ],
      series: [
      
        {
          type: 'custom',
          renderItem: (params, api) => {
             const location = api.coord([api.value(0), api.value(1)]);
             return {
                type: 'group',
                children: [
                   {
                      type: 'CubeLeft',
                      shape: {
                         api,
                         xValue: api.value(0),
                         yValue: api.value(1),
                         x: location[0],
                         y: location[1],
                         xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                         fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                               offset: 0,
                               color: '#39CEFF'
                            },
                            {
                               offset: 1,
                               color: 'rgba(51, 152, 188, 0)',
                            },
                         ]),
                      },
                   },
                   {
                      type: 'CubeRight',
  
                      shape: {
                         api,
                         xValue: api.value(0),
                         yValue: api.value(1),
                         x: location[0],
                         y: location[1],
                         xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                         fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                             {
                               offset: 0,
                               color: '#39CEFF'
                            },
                            {
                               offset: 1,
                               color: 'rgba(51, 152, 188, 0)',
                            },
                         ]),
                      },
                   },
                   {
                      type: 'CubeTop',
                      shape: {
                         api,
                         xValue: api.value(0),
                         yValue: api.value(1),
                         x: location[0],
                         y: location[1],
                         xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                         fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                               offset: 0,
                               color: '#00DEFF',
                            },
                            {
                               offset: 1,
                               color: '#00DEFF',
                            },
                         ]),
                      },
                   },
                ],
             };
          },
          data:data,
          
       },
           {
           type: 'bar',
           itemStyle: {
              color: 'transparent',
           },
           tooltip: {},
           data: data,
              label: {
            show: true,
            precision: 1,
            position: "top",
            valueAnimation: true,
            color: "#D3E4FE",
            fontFamily: "monospace",
            offset: [0, -10],
          },
        },
      ]
    },
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  const handleRun = (val) => {
    opt(val);
  };
  onMounted(() => {
    setTimeout(() => {
      opt = init();
    }, 500);
    window.addEventListener("resize", () => {
      opt();
    });
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
    `;
  };
  